import React, { useEffect, useState } from 'react'
import { NavBar, Space, Toast, Card, SearchBar } from 'antd-mobile'
import { useNavigate, useParams } from 'react-router-dom'
import request from '../../api/request'
import { useSelector, useDispatch } from 'react-redux'
import { IndexBar, List, Tag } from 'antd-mobile'
import styles from './index.module.css'
import { deitchange } from '../../store/cityle'
import useDebpunce from '../../hook/useDebpunce'
function City() {
  let navtion = useNavigate()
  let dispatch = useDispatch()
  const { type } = useParams()

  let [list, setList] = useState([])
  let [hoslist, setHoslist] = useState([])
  const getList = async () => {
    const res = await request.get('/api/city')
    console.log(res);
    const { code, data } = res.data
    if (code == 200) {
      setList(data.city)
      setHoslist(data.hotCities)

    }

  }

  useEffect(() => {
    getList()
  }, [])

  // 选择城市
  const citydj = (city) => {
    dispatch(deitchange({ type, city }))
    navtion('/')
  }
  const [searLists, setSearList] = useState([])
  const [lsjlList, setLsjlList] = useState([])



  return (
    <div>
      {/* 导航栏 */}
      <NavBar onBack={() => navtion(-1)}>标题</NavBar>



    

      {/* 卡片 */}
      <Card title='热门城市' >
        <div className={styles.hoslist}>
          {hoslist.length > 0 && hoslist.map((item, index) => (
            <Tag key={index}>{item.name}</Tag>
          ))}
        </div>

      </Card>
      {/* 列表 */}
      <Card title='城市列表' >
        <div style={{ height: window.innerHeight }}>
          <IndexBar>
            {list.length > 0 && list.map((item) => {
              return (
                <IndexBar.Panel
                  index={item.initial}
                  title={`${item.initial}`}
                  key={`${item.initial}`}
                >
                  <List >
                    {item.list.map((item, index) => (
                      <List.Item arrowIcon={false} key={index} onClick={() => citydj(item.name)}>{item.name}</List.Item>
                    ))}
                  </List>
                </IndexBar.Panel>
              )
            })}
          </IndexBar>
        </div>
      </Card>
    </div>
  )
}

export default City
